/* 卡片边框动画和效果 */
.card-container {
    position: relative;
    transform-style: preserve-3d;
    will-change: transform;
    -webkit-tap-highlight-color: transparent; /* 移除移动端点击高亮 */
  }
  
  .card-border {
    opacity: 0;
    transition: opacity 500ms ease-in-out;
    z-index: -1;
  }
  
  .card-container:hover .card-border, 
  .card-container:active .card-border,
  .card-container:focus .card-border {
    opacity: 1;
  }
  
  /* 卡片内容和动画效果 */
  .card-content {
    transform: translateY(0);
    transition: all 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  }
  
  .card-container:hover .card-content,
  .card-container:active .card-content,
  .card-container:focus .card-content {
    transform: translateY(-12px);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  }
  
  /* 毛玻璃效果区域和文本样式 */
  .glass-text-container {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
    text-align: center;
    transform: translateY(0);
    transition: transform 0.3s ease;
    position: relative;
    z-index: 30;
  }
  
  /* 全覆盖毛玻璃效果 */
  .full-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 30 !important;
  }
  
  /* 悬停时文本容器的效果 */
  .glass-text-container:hover,
  .glass-text-container:active,
  .glass-text-container:focus {
    transform: translateY(0);
    background-color: rgba(0, 0, 0, 0.5);
  }
  
  /* 直接应用模糊效果到图片 */
  .blur-image {
    filter: blur(5px) brightness(0.7);
    -webkit-filter: blur(5px) brightness(0.7); /* 兼容Safari */
  }
  
  /* 浮动动画定义 - 可选，如果想要悬浮动画效果取消注释 */
  @keyframes float {
    0% {
      transform: translateY(0px);
    }
    50% {
      transform: translateY(-10px);
    }
    100% {
      transform: translateY(0px);
    }
  }
  
  /* 
  如果想要悬浮动画效果，可以取消下面的注释
  .card-container:hover .card-content {
    animation: float 3s ease-in-out infinite;
  }
  */
  
  /* 触摸设备专用动画效果 */
  @media (hover: none) and (pointer: coarse) {
    .card-container:active .card-border {
      opacity: 1;
    }
    
    .card-container:active .card-content {
      transform: translateY(-8px);
      box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    }
    
    /* 为React的isTouched状态添加样式 */
    .card-container.active .card-border {
      opacity: 1;
    }
    
    .card-container.active .card-content {
      transform: translateY(-8px);
      box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    }
  }